<template>
  <div class="login-container">
<!--    背景图片-->
      <el-image class="login-img"  :src="bgImg"></el-image>

    <el-row style="padding-top: 5%;">

      <el-col :span="24" >
<!--        登录表单-->
        <el-card class="login-card" shadow="hover">
          <div   style="text-align: right;">
            <el-image style="width: 70px" :src="loginBearImg"></el-image>
            <hr/>
          </div>
<!--          文字描述-->
          <p style="text-align: center;line-height: 25px;letter-spacing: 1px;font-weight: bolder;">
            登录可享更多权益<br/>
            解锁评论功能
            <span style="color:#fc5937;">海量资源免费使用</span>
          </p>
<!--          登录/注册切换 @tab-click="handleClick" -->
          <el-tabs :stretch="true" v-model="activeName" >
            <el-tab-pane label="密码登录" name="login">
<!--              登录表单-->
              <el-form :model="loginForm" :rules="rules" status-icon  ref="loginForm">
                <el-form-item  prop="username">
                  <el-input v-model="loginForm.username" placeholder="手机号/邮箱" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                  <el-input type="password" v-model="loginForm.password" placeholder="密码" autocomplete="off"></el-input>
                </el-form-item>
                <!--            忘记密码-->
                <el-form-item  style="text-align: right;">
                  <el-button @click="handleTodo" type="text" style="font-size:12px;color: black;">忘记密码？</el-button>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" style="width: 100%;border-radius: 20px;background: #25a4bb;" @click="submitForm('loginForm')">登录</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="免注册登录" name="second">
              <!--              免密登录-->
              <el-descriptions title="用户信息">
                <el-descriptions-item label="账号">user</el-descriptions-item>
                <el-descriptions-item label="密码">123</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register">
<!--              注册功能-->
              <el-card>
                <div slot="header">
                  功能暂未开放！
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {reqLogin} from "@/API";

export default {
  name: 'LoginCom',
  data(){
    //验证规则
    let checkUsername = (rule, value, callback) => {
      if (value===null || value === '') {
        return callback(new Error('账号不能为空'));
      }else if(value.length < 4){
        return callback(new Error('账号长度不正确'));
      }else{
        callback();
      }

    };
    return{
      //img
      bgImg:require("@/assets/img/winterBg.jpg"),
      loginBearImg:require("@/assets/img/loginBear.png"),
      loginForm:{
        username:'',
        password:''
      },
      //默认登录
      activeName:"login",
      //验证映射规则
      rules: {
        username: [
          { validator: checkUsername, trigger: 'blur' }
        ],
      }
    };

  },
  methods:{
    handleTodo(){
      this.$message.info("待开发……")
    },
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //登录请求
          reqLogin(this.loginForm).then((res) =>{

            if(res.status === 200){
            //  浏览器写入token

              localStorage.setItem("pole_time_not",res.data.token);
              this.$message.success("登录成功")

              //跳转
              // 取到原页面路径
              let url = this.$route.query.redirect;
              if(url === null || url === undefined){
                this.$router.push("home")
              }else{
                // 跳转回原页面
                this.$router.push({
                  path: decodeURIComponent(url)
                });
              }

              // this.$router.push("home")
              location.reload()

            }else{
              this.$message.error(res.message)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style >
/* body */
.login-container{
  width:100%;
  height: 100%;
}

.login-img{
  position:absolute;
  z-index:-1;
  width: 100%;
  height:92.5%;
}
.login-card{
  margin:0 auto;
  width: 40%;
}

</style>
